<script setup lang="ts">
import {message} from 'ant-design-vue';
import {useForm, useModal} from '#/ui-kit';
import {useDictStore} from '#/stores';

import {findDeptListTree} from '#/api/system/dept';
import {findRoleList} from '#/api/system/role';
import {createUserInfo, findUserRoleIds, updateUserInfo} from '#/api/system/user';

const emits = defineEmits(['close']);

const {getDictData} = useDictStore();

const [Modal, modalApi] = useModal({
  draggable: true,
  closeOnClickModal: false,
  destroyOnClose: true,
  onConfirm: function () {
    formApi.validateAndSubmitForm();
  },
  onBeforeClose: function () {
    modalApi.setState({confirmLoading: false})
    modalApi.setData({});
    formApi.resetForm();
  },
  async onOpenChange(isOpen: boolean) {
    if (isOpen) {
      let data = modalApi.getData();
      if (data?.id) {
        const [roleIdList] = await Promise.all([
          findUserRoleIds({userId: data?.id}),
        ]);

        data.roleIdList = roleIdList;
      }
      formApi.setValues(data, false, false);
    }
  }
});

const [Form, formApi] = useForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
      allowClear: true,
    },
  },
  layout: 'horizontal',
  showDefaultActions: false,
  schema: [
    {
      label: '用户姓名',
      fieldName: 'nickname',
      component: 'Input',
      componentProps: {placeholder: '请输入用户姓名'},
      rules: 'required',
    },
    {
      label: '用户账号',
      fieldName: 'username',
      component: 'Input',
      componentProps: {placeholder: '请输入用户账号'},
      rules: 'required',
    },
    {
      label: '所属部门',
      fieldName: 'deptId',
      component: 'ApiTreeSelect',
      componentProps: {
        api: findDeptListTree,
        showSearch: true,
        treeNodeFilterProp: 'name',
        fieldNames: {
          value: 'id',
          label: 'name',
          children: 'children',
        },
        treeDefaultExpandedKeys: [1],
        placeholder: '请选择所属部门',
      },
      rules: 'required',
    },
    {
      label: '所属角色',
      fieldName: 'roleIdList',
      component: 'ApiSelect',
      componentProps: {
        api: findRoleList,
        fieldNames: {
          value: 'id',
          label: 'name',
        },
        optionFilterProp: 'name',
        mode: 'multiple',
        showSearch: true,
        placeholder: '请选择所属角色',
      },
    },
    {
      label: '邮箱地址',
      fieldName: 'email',
      component: 'Input',
      componentProps: {placeholder: '请输入邮箱地址'},
    },
    {
      label: '启用状态',
      fieldName: 'enableStatus',
      component: 'RadioGroup',
      componentProps: {
        options: getDictData('enable_status', true),
      },
      defaultValue: 0,
    },
  ],
  handleSubmit: function (values) {
    let id = values?.id;
    modalApi.setState({confirmLoading: true});
    if (id) {
      updateUserInfo(values).then(() => {
        message.success('用户信息更新成功');
        modalApi.close();

        emits('close');
      }).finally(() => {
        modalApi.setState({confirmLoading: false});
      });
    } else {
      createUserInfo(values).then(() => {
        message.success('用户信息新增成功');
        modalApi.close();
        emits('close');
      }).finally(() => {
        modalApi.setState({confirmLoading: false});
      });
    }
  },
});
</script>

<template>
  <Modal>
    <Form/>
  </Modal>
</template>